import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('portalThemeStore')
@observer
class E9QuickSearchTypes extends React.Component {
  constructor(props) {
    super(props);
    this.onQuickSearchTypesClick = this.onQuickSearchTypesClick.bind(this);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { quickSearchTypes } = portalThemeStore;

    return (
      <div className="e9header-quick-search-types-content">
        {quickSearchTypes.map((item, index) => {
          const { type, name, icon } = item;

          let iconCom = null;
          if (icon) {
            if (type == 10) {
              iconCom = <img src={icon} alt="" />;
            } else {
              iconCom = <i className={icon} style={{ fontSize: '16px', marginLeft: '1px', marginTop: '-8px' }} />;
            }
          } else {
            iconCom = <i className={`wevicon-quick-search-${type}`} />;
          }

          return (
            <div key={index} className="e9header-quick-search-types-item" title={name} onClick={() => this.onQuickSearchTypesClick(item)}>
              {iconCom}
              <span>{name}</span>
            </div>
          );
        })}
      </div>
    );
  }

  onQuickSearchTypesClick(item) {
    this.props.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onQuickSearchTypesSelectedChange(item);
  }
}

export default E9QuickSearchTypes;
